<template>
	<view>
		<view class="edit_con">
			<view class="con">
				<text>{{$t('language')}}</text>
				<view>
					<picker @change="bindPickerLang" :value="index_lang" :range="array_lang">
						<label class="picker">
							{{index_lang==0?$t('language_alert'):(array_lang[index_lang])}}
						</label>
					</picker>
					<icon class="iconfont icon-xiangyou"></icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index_lang: 0, //语言 0：未知、1：português(葡萄牙语)、2：china(简体中文)
				array_lang: [this.$t('language_alert'), "português(葡萄牙语)", "china(简体中文)"], //数组
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('set')
			})
		},
		onLoad() {
			var _this = this;
			
			//语言
			switch (_this._i18n.locale) {
				case 'pt_BR': {
					_this.index_lang = 1;
				}
				break;
				case 'zh_CN': {
					_this.index_lang = 2;
				}
				break;
			}
		},
		methods: {
			//语言选择
			bindPickerLang: function(e) {
				var _this = this;
				_this.index_lang = e.detail.value;
				if (_this.index_lang == 0) return;

				//语言
				switch (_this.index_lang) {
					case 1: {
						_this._i18n.locale = 'pt_BR';
						uni.setStorageSync('lang', 'pt_BR');
					}
					break;
					case 2: {
						_this._i18n.locale = 'zh_CN';
						uni.setStorageSync('lang', 'zh_CN');
					}
					break;
				}

			},
		}
	}
</script>

<style>
	.edit_con {
		display: block;
		padding: 50rpx 5%;
		width: 100%;
	}

	.edit_con .con {
		display: block;
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}

	.edit_con .con text {
		float: left;
		font-size: 34rpx;
		color: #303133;
	}

	.edit_con .con view {
		float: right;
		color: #c0c4cc;
	}

	.edit_con .con view label {
		float: left;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.edit_con .con view button {
		float: left;
		width: auto;
		padding: 0;
		line-height: 110rpx;
		font-size: 28rpx;
		color: #c0c4cc;
		font-weight: normal;
		background-color: transparent;
		margin-right: 10rpx;
		border: 0;
	}

	.edit_con .con view button::after {
		border: 0;
	}

	.edit_con .con view icon {
		float: left;
		font-size: 32rpx;
	}

	.edit_con .con view picker {
		float: left;
		width: 300rpx;
	}

	.edit_con .con view picker label {
		float: right;
		width: 100%;
		text-align: right;
	}

	.edit_con .img {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.edit_con .img image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}


	.show-btn {
		margin-top: 100rpx;
		color: #22cc22;
	}

	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 9000;
		color: #fff;
	}

	.modal-dialog {
		width: 540rpx;
		overflow: hidden;
		position: fixed;
		top: 50%;
		left: 0;
		z-index: 9999;
		background: #f9f9f9;
		margin: -180rpx 105rpx;
		border-radius: 36rpx;
	}

	.modal-title {
		padding-top: 50rpx;
		font-size: 36rpx;
		color: #030303;
		text-align: center;
	}

	.modal-content {
		padding: 50rpx 32rpx;
	}

	.modal-input {
		display: flex;
		background: #fff;
		border: 2rpx solid #ddd;
		border-radius: 4rpx;
		font-size: 28rpx;
	}

	.input {
		width: 100%;
		height: 82rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #333;
	}

	input-holder {
		color: #666;
		font-size: 28rpx;
	}

	.modal-footer {
		display: flex;
		flex-direction: row;
		height: 86rpx;
		border-top: 1px solid #dedede;
		font-size: 34rpx;
		line-height: 86rpx;
	}

	.btn-cancel {
		width: 50%;
		color: #666;
		text-align: center;
		border-right: 1px solid #dedede;
	}

	.btn-confirm {
		width: 50%;
		color: #ec5300;
		text-align: center;
	}
</style>